import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, InputItem, List, WingBlank, WhiteSpace } from 'antd-mobile';
import { useAuth } from '../context/AuthContext';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const { login } = useAuth();//认证上下文中的登录方法
  const navigate = useNavigate();

const handleLogin = () => {
  // 1. 表单验证
  if (!username || !password) {
    alert('请输入用户名和密码');
    return;
  }
  
  // 2. 开始登录
  setLoading(true);
  
  // 3. 模拟登录过程
  setTimeout(() => {
    // 4. 调用认证上下文的登录方法
    login(username);
    
    // 5. 更新状态
    setLoading(false);
    
    // 6. 跳转到首页
    navigate('/');
  }, 1000);
};

  return (
    <div>
      <h1 className="page-title">用户登录</h1>
      
      <WingBlank size="lg">
        <List>
          <InputItem
            clear
            value={username}
            onChange={setUsername}
            placeholder="请输入用户名"
          >
            用户名
          </InputItem>
          <InputItem
            clear
            type="password"
            value={password}
            onChange={setPassword}
            placeholder="请输入密码"
          >
            密码
          </InputItem>
        </List>
        
        <WhiteSpace size="xl" />
        
        <Button 
          type="primary" 
          loading={loading}
          onClick={handleLogin}
        >
          {loading ? '登录中...' : '登录'}
        </Button>
        
        <WhiteSpace size="md" />
        
        <div style={{ textAlign: 'center', marginTop: '20px' }}>
          <p style={{ color: '#666' }}>测试账号: user / 123456</p>
          <p style={{ color: '#666', marginTop: '5px' }}>无需真实注册</p>
        </div>
      </WingBlank>
    </div>
  );
};

export default Login;